<template>
  <div class="page_mobile_member">
    <div :class="['header-top',scroll > 0 ?'active':'']">
      <div class="header_left" @click="$router.back()">
        <van-icon name="arrow-left" style="margin-left:.2rem;" />
      </div>
      <div class="center_title">会员中心</div>
      <div class="header_right" @click="$router.push('/m/member-card')">
        兑换码
      </div>
    </div>
    <div class="user-info">
      <div class="avatar">
        <img v-show="user_info.avatar" :src="user_info.avatar" alt="">
        <img v-show="!user_info.avatar" src="/img/mobile/member-default.png" alt="">
      </div>
      <div class="member-level">
        <div class="title" v-if="!isMember">您还未开通会员哦</div>
        <div class="user-member" v-if="!!this.member && member_info">
          <div class="username">{{ user_info.acName }}</div>
          <div class="userlevel">{{ member.memberLevel | formatMember(that) }}
            <img v-if="member.memberLevel == 0" class="small" src="/img/mobile/small-member.png" alt="">
            <img v-if="member.memberLevel == 1" class="middle" src="/img/mobile/middle-member.png" alt="">
            <img v-if="member.memberLevel == 2" class="high" src="/img/mobile/high-member.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="member-container">
      <div class="menu-list" v-if="member_info">
        <div class="menu-item" v-if="isShowSmallMember" @touchstart="menuHandle('small')">
          <img v-if="activeName === 'small'" src="/img/mobile/member_ordinary.png" alt="">
          <img v-else src="/img/mobile/member_ordinary_active.png" alt="">
          <div class="member-name">{{member_info.smallMemberName}}</div>
        </div>
        <div class="menu-item" v-if="isShowMiddleMember" @touchstart="menuHandle('middle')">
          <img v-if="activeName === 'middle'" src="/img/mobile/member_senior.png" alt="">
          <img v-else src="/img/mobile/member_senior_active.png" alt="">
          <div class="member-name">{{member_info.middleMemberName}}</div>
        </div>
        <div class="menu-item" v-if="isShowHighMember" @touchstart="menuHandle('high')">
          <img v-if="activeName === 'high'" src="/img/mobile/member_super.png" alt="">
          <img v-else src="/img/mobile/member_super_active.png" alt="">
          <div class="member-name">{{member_info.highMemberName}}</div>
        </div>
      </div>
      <div class="member_info" v-if="member_info && activeName === 'small'">
      <div
        class="list-item"
        :class="active === 1 ? 'active' : ''"
        @click="handleActive(1, member_info.smallMemberMonth.toFixed(2))"
        v-if="member_info.smallMemberMonthSwitch == 1"
      >
        <div class="title">{{ member_info.smallMemberName }}月卡</div>
        <div class="price">￥{{ member_info.smallMemberMonth.toFixed(2) }}</div>
        <div class="price_day">
          {{ (member_info.smallMemberMonth / 30).toFixed(2) }}/天
        </div>
      </div>
      <div
        class="list-item"
        :class="active === 2 ? 'active' : ''"
        @click="handleActive(2, member_info.smallMemberQuarter.toFixed(2))"
        v-if="member_info.smallMemberQuarterSwitch == 1"
      >
        <div class="title">{{ member_info.smallMemberName }}季卡</div>
        <div class="price">
          ￥{{ member_info.smallMemberQuarter.toFixed(2) }}
        </div>
        <div class="price_day">
          {{ (member_info.smallMemberQuarter / 90).toFixed(2) }}/天
        </div>
      </div>
      <div
        class="list-item"
        :class="active === 3 ? 'active' : ''"
        @click="handleActive(3, member_info.smallMemberYear.toFixed(2))"
        v-if="member_info.smallMemberYearSwitch == 1"
      >
        <div class="title">{{ member_info.smallMemberName }}年卡</div>
        <div class="price">￥{{ member_info.smallMemberYear.toFixed(2) }}</div>
        <div class="price_day">
          {{ (member_info.smallMemberYear / 365).toFixed(2) }}/天
        </div>
      </div>
      <div
        class="list-item"
        :class="active === 4 ? 'active' : ''"
        @click="handleActive(4, member_info.smallMemberForever.toFixed(2))"
        v-if="member_info.smallMemberForeverSwitch == 1"
      >
        <div class="title">{{ member_info.smallMemberName }}终身卡</div>
        <div class="price">
          ￥{{ member_info.smallMemberForever.toFixed(2) }}
        </div>
        <div class="price_day">
          {{ (member_info.smallMemberForever / 36500).toFixed(2) }}/天
        </div>
      </div>
      <div style="width: 1px; flex-shrink: 0"></div>
      </div>
      <div class="member_info" v-if="member_info && activeName === 'middle'">
        <div
          class="list-item"
          :class="active === 5 ? 'active' : ''"
          @click="handleActive(5, member_info.middleMemberMonth.toFixed(2))"
          v-if="member_info.middleMemberMonthSwitch == 1"
        >
          <div class="title">{{ member_info.middleMemberName }}月卡</div>
          <div class="price">
            ￥{{ member_info.middleMemberMonth.toFixed(2) }}
          </div>
          <div class="price_day">
            {{ (member_info.middleMemberMonth / 30).toFixed(2) }}/天
          </div>
        </div>
        <div
          class="list-item"
          :class="active === 6 ? 'active' : ''"
          @click="handleActive(6, member_info.middleMemberQuarter.toFixed(2))"
          v-if="member_info.middleMemberQuarterSwitch == 1"
        >
          <div class="title">{{ member_info.middleMemberName }}季卡</div>
          <div class="price">
            ￥{{ member_info.middleMemberQuarter.toFixed(2) }}
          </div>
          <div class="price_day">
            {{ (member_info.middleMemberQuarter / 90).toFixed(2) }}/天
          </div>
        </div>
        <div
          class="list-item"
          :class="active === 7 ? 'active' : ''"
          @click="handleActive(7, member_info.middleMemberYear.toFixed(2))"
          v-if="member_info.middleMemberYearSwitch == 1"
        >
          <div class="title">{{ member_info.middleMemberName }}年卡</div>
          <div class="price">￥{{ member_info.middleMemberYear.toFixed(2) }}</div>
          <div class="price_day">
            {{ (member_info.middleMemberYear / 365).toFixed(2) }}/天
          </div>
        </div>
        <div
          class="list-item"
          :class="active === 8 ? 'active' : ''"
          @click="handleActive(8, member_info.middleMemberForever.toFixed(2))"
          v-if="member_info.middleMemberForeverSwitch == 1"
        >
          <div class="title">{{ member_info.middleMemberName }}终身卡</div>
          <div class="price">
            ￥{{ member_info.middleMemberForever.toFixed(2) }}
          </div>
          <div class="price_day">
            {{ (member_info.middleMemberForever / 36500).toFixed(2) }}/天
          </div>
        </div>
        <div style="width: 1px; flex-shrink: 0"></div>
      </div>
      <div class="member_info" v-if="member_info && activeName === 'high'">
        <div
          class="list-item"
          :class="active === 9 ? 'active' : ''"
          @click="handleActive(9, member_info.highMemberMonth.toFixed(2))"
          v-if="member_info.highMemberMonthSwitch == 1"
        >
          <div class="title">{{ member_info.highMemberName }}月卡</div>
          <div class="price">￥{{ member_info.highMemberMonth.toFixed(2) }}</div>
          <div class="price_day">
            {{ (member_info.highMemberMonth / 30).toFixed(2) }}/天
          </div>
        </div>
        <div
          class="list-item"
          :class="active === 10 ? 'active' : ''"
          @click="handleActive(10, member_info.highMemberQuarter.toFixed(2))"
          v-if="member_info.highMemberQuarterSwitch == 1"
        >
          <div class="title">{{ member_info.highMemberName }}季卡</div>
          <div class="price">
            ￥{{ member_info.highMemberQuarter.toFixed(2) }}
          </div>
          <div class="price_day">
            {{ (member_info.highMemberQuarter / 90).toFixed(2) }}/天
          </div>
        </div>
        <div
          class="list-item"
          :class="active === 11 ? 'active' : ''"
          @click="handleActive(11, member_info.highMemberYear.toFixed(2))"
          v-if="member_info.highMemberYearSwitch == 1"
        >
          <div class="title">{{ member_info.highMemberName }}年卡</div>
          <div class="price">￥{{ member_info.highMemberYear.toFixed(2) }}</div>
          <div class="price_day">
            {{ (member_info.highMemberYear / 365).toFixed(2) }}/天
          </div>
        </div>
        <div
          class="list-item"
          :class="active === 12 ? 'active' : ''"
          @click="handleActive(12, member_info.highMemberForever.toFixed(2))"
          v-if="member_info.highMemberForeverSwitch == 1"
        >
          <div class="title">{{ member_info.highMemberName }}终身卡</div>
          <div class="price">
            ￥{{ member_info.highMemberForever.toFixed(2) }}
          </div>
          <div class="price_day">
            {{ (member_info.highMemberForever / 36500).toFixed(2) }}/天
          </div>
        </div>
        <div style="width: 1px; flex-shrink: 0"></div>
      </div>
      <div class="privilege">
        <div class="privilege-title">
          <img src="/img/mobile/member_privilege.png" alt="">
          <div>尊享特权</div>
        </div>
        <div class="privilege_list" v-if="memberList.length != 0 && activeName === 'small'">
          <div class="privilege_item" v-for="(item,index) in memberList[0].introduction" :key="index">{{item}}</div>
        </div>
        <div class="privilege_list" v-if="memberList.length != 0 && activeName === 'middle'">
          <div class="privilege_item" v-for="(item,index) in memberList[1].introduction" :key="index">{{item}}</div>
        </div>
        <div class="privilege_list" v-if="memberList.length != 0 && activeName === 'high'">
          <div class="privilege_item" v-for="(item,index) in memberList[2].introduction" :key="index">{{item}}</div>
        </div>
      </div>
    </div>
    <div class="buy_center">
      <div class="open_btn" @click="handleBuyMember()" v-if="!isMember">
        确认支付￥{{ money }}
      </div>
      <div class="open_btn" v-else>已开通</div>
      <div class="tips-footer">开通会员即代表同意<span class="agreement" @click="$router.push('/m/agreement')">会员服务协议</span>。</div>
    </div>
    <div class="member-dialog" v-if="!!this.member && member_info && memberDialog">
      <div class="dialog-box">
        <img v-show="member.memberLevel == 0" src="/img/mobile/member_popup_ordinary.png" alt="">
        <img v-show="member.memberLevel == 1" src="/img/mobile/member_popup_senior.png" alt="">
        <img v-show="member.memberLevel == 2" src="/img/mobile/member_popup_super.png" alt="">
        <div class="user-dialog">亲爱的{{ user_info.acName }}</div>
        <div class="level-dialog">恭喜您开通了{{ member.memberLevel | formatMember(that) }}！</div>
        <div class="cancel-btn" @touchstart="cancelHandle">确定</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getMemberConfig,buyMember,getMember,getMemberList } from "~/api/member";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
      that:this,
      active: 0,
      memberLevel: 0,
      durationType: 0,
      member_info: {},
      activeName: "small",
      money:0.00,
      isMember:null,
      member:null,
      memberList:[],
      scroll:0,
      memberDialog:false,
    };
  },
  activated() {
    if (!this.token && Object.keys(this.user_info).length == 0) {
      this.$router.replace("/m/login");
      return;
    }
    this.getData();
    this.getMember();
    this.getMemberList();
    window.addEventListener("scroll", this.eventListener);
  },
  deactivated() {
    window.removeEventListener("scroll", this.eventListener);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.eventListener);
  },
  created() {
    if (!this.token && Object.keys(this.user_info).length == 0) {
      this.$router.replace("/m/login");
      return;
    }
    this.getData();
    this.getMember();
    this.getMemberList();
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
    }),
    isShowSmallMember(){
      let {smallMemberMonthSwitch,smallMemberQuarterSwitch,smallMemberYearSwitch,smallMemberForeverSwitch} = this.member_info;
      if(smallMemberMonthSwitch == 0 && smallMemberQuarterSwitch == 0 && smallMemberYearSwitch == 0 && smallMemberForeverSwitch == 0){
        return false;
      }else{
        return true;
      }
    },
    isShowMiddleMember(){
      let {middleMemberMonthSwitch,middleMemberQuarterSwitch,middleMemberYearSwitch,middleMemberForeverSwitch} = this.member_info;
      if(middleMemberMonthSwitch == 0 && middleMemberQuarterSwitch == 0 && middleMemberYearSwitch == 0 && middleMemberForeverSwitch == 0){
        return false;
      }else{
        return true;
      }
    },
    isShowHighMember(){
      let {highMemberMonthSwitch,highMemberQuarterSwitch,highMemberYearSwitch,highMemberForeverSwitch} = this.member_info;
      if(highMemberMonthSwitch == 0 && highMemberQuarterSwitch == 0 && highMemberYearSwitch == 0 && highMemberForeverSwitch == 0){
        return false;
      }else{
        return true;
      }
    }
  },
  mounted() {
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
  },
  filters:{
    formatMember(val,that){
      switch (val){
        case 0:
          return that.member_info.smallMemberName;
        case 1:
          return that.member_info.middleMemberName;
        case 2:
          return that.member_info.highMemberName;
        default:
          return "未知";
      }
    }
  },
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    cancelHandle(){
      this.memberDialog = false;
    },
    menuHandle(type){
      this.activeName = type;
    },
    eventListener(){
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
    },
    async getData() {
      this.SET_IS_LOADING(true);
      let result = await getMemberConfig();
      console.log("result", result);
      if (result && result.data && result.data.code == 200) {
        this.member_info = result.data.data;
        this.isOpenMember = result.data.data.isOpenMember === 1 ? true : false;
        // this.money = this.member_info.smallMemberMonth.toFixed(2);
      } else {
        
      }
      this.SET_IS_LOADING(false);
    },
    async getMember() {
      this.SET_IS_LOADING(true);
      let result = await getMember(this.user_info.id);
      console.log("会员", result);
      if (result && result.data && result.data.code == 200) {
        this.isMember = !!result.data.data;
        
          this.member = result.data.data;
        
        
      } else {
        
      }
      this.SET_IS_LOADING(false);
    },
    async getMemberList() {
      this.SET_IS_LOADING(true);
      let result = await getMemberList();
      console.log("result", result);
      if (result && result.data && result.data.code == 200) {
        // result.data.data
        // console.log(result.data.data.rows.map(item=>{return {...item,introduction:JSON.parse(item.introduction)}}));
        this.memberList = result.data.data.rows.map(item=>{return {...item,introduction:JSON.parse(item.introduction)}});
      } else {
        
      }
      this.SET_IS_LOADING(false);
    },
    handleActive(val,money) {
      this.active = val;
      this.money = money;
      switch (val) {
        case 1:
          this.memberLevel = 0;
          this.durationType = 0;
          break;
        case 2:
          this.memberLevel = 0;
          this.durationType = 1;
          break;
        case 3:
          this.memberLevel = 0;
          this.durationType = 2;
          break;
        case 4:
          this.memberLevel = 0;
          this.durationType = 3;
          break;
        case 5:
          this.memberLevel = 1;
          this.durationType = 0;
          break;
        case 6:
          this.memberLevel = 1;
          this.durationType = 1;
          break;
        case 7:
          this.memberLevel = 1;
          this.durationType = 2;
          break;
        case 8:
          this.memberLevel = 1;
          this.durationType = 3;
          break;
        case 9:
          this.memberLevel = 2;
          this.durationType = 0;
          break;
        case 10:
          this.memberLevel = 2;
          this.durationType = 1;
          break;
        case 11:
          this.memberLevel = 2;
          this.durationType = 2;
          break;
        case 12:
          this.memberLevel = 2;
          this.durationType = 3;
          break;
      }
    },
    async handleBuyMember(){
      if(this.active == 0){
        console.log("未选中会员套餐");
        this.$toast('未选中会员套餐');
        return false;
      }
      this.$dialog.confirm({
        title: '支付',
        message: '本次支付将使用余额进行支付，是否继续！',
      }).then(async () => {
        this.SET_IS_LOADING(true);
         let params = {
          userId: this.user_info.id,
          memberLevel:this.memberLevel,
          durationType:this.durationType,
          ip: returnCitySN.cip
        };
        let result = await buyMember(params);
        console.log("result", result);
        if (result && result.data && result.data.code == 200) {
          this.SET_IS_LOADING(false);
          this.getMember();
          this.memberDialog = true;
          // this.$toast("购买成功");
        } else if (result && result.data && result.data.code == 206) {
          this.SET_IS_LOADING(false);
          // this.$toast("购买失败，"+result.data.msg+"，请先充值!");
          this.$dialog
              .confirm({
                title: this.$t("locale.mobile.order.t9"),
                message:
                  this.$t("locale.mobile.order.t10") +
                  (this.money - this.user_info.balance) +
                  this.$t("locale.mobile.order.t11"),
                confirmButtonText: this.$t("locale.mobile.order.t12")
              })
              .then(() => {
                this.$router.push({
                  path: "/m/wallet",
                  query: {
                    num: this.money - this.user_info.balance,
                    rdurl: this.$route.fullPath
                  }
                });
              });
        } else {
          this.SET_IS_LOADING(false);
          
        }
      })
      .catch(() => {
        this.$toast("已取消");
      });
     
        
      
      
      this.SET_IS_LOADING(false);
    }
  },
};
</script>
<style lang="scss">
[class*="van-hairline"]::after {
  border: none;
}
</style>
<style lang='scss' scoped>
.page_mobile_member {
  background-color: #ffffff;
  min-height: 100vh;
  .member-dialog{
    position: fixed;
    z-index: 99999999999;
    width: 7.2rem;
    height: 100vh;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    .dialog-box{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 6.048rem;
      height: 5.184rem;
      background-color: #ffffff;
      border-radius: .192rem;
      img{
        display: block;
        width: 3.3888rem;
        height: 3.3888rem;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%,-44%);
      }
      .user-dialog{
        text-align: center;
        margin-top: 2rem;
        margin-bottom: .2rem;
        font-size: .3455rem;
        font-weight: bold;
        color: #626466;
      }
      .level-dialog{
        text-align: center;
        font-size: .3455rem;
        font-weight: bold;
        color: #626466;
      }
      .cancel-btn{
        width: 5.376rem;
        height: .8448rem;
        margin: .8rem auto;
        background-image: linear-gradient(0deg, 
          #dbb06d 0%, 
          #ffe2b5 100%), 
        linear-gradient(
          #626466, 
          #626466);
        background-blend-mode: normal, 
          normal;
        border-radius: .4224rem;
        text-align: center;
        line-height: .8448rem;
        color: #ffffff;
        font-size: .34559rem;
        font-weight: bold;
      }
    }
  }
  .header-top {
    width: 7.2rem;
    height: 0.9rem;
    z-index: 999999;
    position: fixed;
    top: 0;
    left: 0;
    line-height: 0.9rem;
    display: flex;
    align-items: center;
    box-shadow: none;
    .header_left {
      width: 15%;
      color: #ffffff;
      font-size: 0.35rem;
      display: flex;
      align-items: center;
    }
    .center_title {
      width: 70%;
      text-align: center;
      font-size: 0.3456rem;
      color: #ffffff;
      font-weight: bold;
    }
    .header_right {
      width: 15%;
      color: #ffffff;
      text-align: center;
      font-size: .26rem;
      img {
        margin: 0 auto;
        display: block;
        width: 0.6111rem;
        height: 0.6111rem;
      }
    }
  }
  .header-top.active{
    background: #2d2f31;
  }
  .user-info{
    width: 7.2rem;
    height: 5.1264rem;
    background: url('/img/mobile/member-bg.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding-top: 1.6rem;
    .avatar{
      width: 1.44rem;
      height: 1.44rem;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto;
      background-color: #ffffff;
      img{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .member-level{
      margin-top: .4rem;
      .title{
        text-align: center;
        color: #ffe2b5;
        font-weight: bold;
        font-size: .345599rem;
      }
      .user-member{
        // text-align: center;
        color: #ffe2b5;
        font-weight: bold;
        font-size: .345599rem;
        display: flex;
        align-items: center;
        justify-content: center;
        .username{
          color: #ffe2b5;
        }
        .userlevel{
          position: relative;
          margin-left: .4rem;
          padding: 0 .16rem 0 .3rem;
          height: .32rem;
          line-height: .32rem;
          background-color: #8b8377;
          border-radius: .16rem;
          color: #ffffff;
          font-size: .192rem;
          font-weight: normal;
          .small{
            position: absolute;
            left: -.2rem;
            top: 0;
            width: .4704rem;
            height: .31679rem;
            display: block;
          }
          .middle{
            position: absolute;
            left: -.15rem;
            top: -.03rem;
            width: .384rem;
            height: .3455rem;
            display: block;
          }
          .high{
            position: absolute;
            left: -.182rem;
            top: -.04rem;
            width: .48rem;
            height: .3936rem;
            display: block;
          }
        }
      }
    }
  }
  .member-container{
    position: relative;
    width: 7.2rem;
    z-index: 99;
    box-sizing: border-box;
    margin-top: -.4rem;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
    background-color: #ffffff;
    padding: .4rem 0;
    .menu-list{
      width: 6.6rem;
      margin: 0 auto;
      height: 1.248rem;
      // padding: 0 .2rem;
      box-sizing: border-box;
      display: flex;
      // justify-content: space-between;
      justify-content: center;
      border-bottom: 1px solid #ededf1;
      .menu-item{
        width: 33.333%;
        height: 100%;
        img{
          display: block;
          width: .63359rem;
          height: .63359rem;
          // width: 1rem;
          // height: 1rem;
          margin: 0 auto;
        }
        .member-name{
          margin-top: .1rem;
          font-size: .2688rem;
          text-align: center;
          font-weight: bold;
          color: #949699;
        }
      }
    }
    .member_info {
      // margin-top: .3rem;
    // box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-overflow-scrolling: touch;
    text-align: justify;
    box-sizing: border-box;
    display: flex;
    .list-item {
      flex-shrink: 0;
      margin: .3rem;
      border: 0.04rem solid #f0f0f5;
      text-align: center;
      border-radius: .1rem;
      background-color: #ffffff;
      padding: .096rem;
      width: 2rem;
      // margin-bottom: .096rem;
      .title {
        color: #634c34;
      }
      .price {
        font-size: 16px;
        color: #d19a47;
      }
      .price_day {
        color: rgba(99, 76, 52, 0.5);
      }
    }
    .list-item.active {
      border: 0.04rem solid #d19a47;
      background-color: #fff9eb;
      .title {
        color: #634c34;
      }
      .price {
        font-size: 16px;
        color: #d19a47;
      }
      .price_day {
        color: rgba(99, 76, 52, 0.5);
      }
    }
  }
  .member_info::-webkit-scrollbar {
    display: none;
  }
    .privilege{
      width: 6.6rem;
      margin: 0 auto;
      margin-top: .2rem;
      .privilege-title{
        display: flex;
        color: #313233;
        font-size: .3rem;
	      font-weight: bold;
        align-items: center;
        margin-bottom: .2rem;
        img{
          width: .384rem;
          height: .384rem;
          display: block;
          margin-right: .2rem;
        }
      }
      .privilege_list{
        .privilege_item{
          margin-bottom: .2rem;
          color: #313233;
          font-size: .288rem;
        }
      }
    }
  }
  .buy_center {
    // padding: 10px;
    width: 7.2rem;
    height: 1.92rem;
    // z-index: 999;
    // position: fixed;
    // left: 0;
    // bottom: 0;
    // background-color: #f6d393;
    .open_btn {
      width: 6.624rem;
      height: .8448rem;
      background-image: linear-gradient(0deg, 
        #dbb06d 0%, 
        #ffe2b5 100%), 
      linear-gradient(
        #dbb06d, 
        #dbb06d);
      background-blend-mode: normal, 
        normal;
        font-size: .34559rem;
        line-height: .8448rem;
      border-radius: .4224rem;
      text-align: center;
      background-color: #4c3f30;
      color: #ffffff;
      margin: 0 auto;
    }
    .tips-footer{
      width: 6rem;
      color: #636466;
      margin: .2rem auto;
      font-size: .2304rem;
      .agreement{
        color: var(--theme-color);
      }
    }
  }
}
</style>